<template>
	<div id="page" class="page page_p" ref="box">
		<app-focus></app-focus>
		<app-notice></app-notice>
		<van-tabs v-model="tabActive" @click="onClick">
			<van-tab :title="'泾彩发布'"/>
			<van-tab :title="'泾彩党建'"/>
			<van-tab :title="'泾彩论坛'"/>
		</van-tabs>
		<van-list v-model="loading" :finished="finished" @load="getList"  style="margin-bottom: 49px;">
			<van-cell v-for="item in list.Items">
				<div  class="newsCell" @click='to("/newsView/"+item.NewsID)' v-if="item.Url==''">
					<div class="pic"><img :src="item.attachmentPath" /></div>
					<h3>{{item.Title}}</h3>
					<p><span>{{item.Source}}</span><span><van-icon name="clock" />{{item.CreateTime}}</span></p>
				</div>
				<a class="newsCell" :href="item.Url" v-if="item.Url!=''" @click='to1'>
					<div class="pic"><img :src="item.attachmentPath" /><i class="news_i">外链</i></div>
					<h3>{{item.Title}}</h3>
					<p><span>{{item.Source}}</span><span><van-icon name="clock" />{{item.CreateTime}}</span></p>
				</a>
			</van-cell>
			<div class="finished" v-if="finished">加载完毕</div>
		</van-list>
		<!--底部菜单-->
		<app-tabbar></app-tabbar>
	</div>
</template>

<script>
	import focus from '@/components/common/focus';
	import tabbar from '@/components/common/tabbar';
	import notice from '@/components/common/notice';
	export default {
		data() {
			return { 
				tabActive: 0,
				Category:1,
				list:{
					CurrentPage:0,
					ItemsPerPage:0,
					Items:[]
				},
				loading: false,
				finished: false
			};
		},
		mounted:function(){	
			if (this.getCookie('Category')!="") {
				this.Category=this.getCookie('Category')
				this.tabActive=this.getCookie('tabActive')
			}
		},
		components:{
			"app-focus":focus,
			"app-notice":notice,
			"app-tabbar":tabbar
		},
		methods: {
			getList(){
				this.$http.get(this.httpUrl+"/news",{params:{Category:this.Category,page:this.list.CurrentPage+1}}).then((response) => {	
				  this.list.CurrentPage=response.data.CurrentPage;
				  this.list.TotalPages=response.data.TotalPages;
				  for (let i = 0; i < response.data.Items.length; i++) {
						this.list.Items.push(response.data.Items[i]);
        			}
				  this.loading = false;
				  if (this.list.CurrentPage >= this.list.TotalPages) {
			          this.finished = true;
				  }
				  setTimeout(() => {
					  this.$refs.box.scrollTop=this.getCookie('scrollTop')
				  }, 1);
				 
				 }).catch(function (error) {
				    console.log(error);
				  })
			},
			onClick(index, title) {
//				this.finished = false;
				this.setCookie('scrollTop',0)
				this.Category=index==0?1:0||index==1?2:0||index==2?3:0;
				this.list.CurrentPage=0;
				this.list.TotalPages=0;
				this.list.Items=[]
				this.getList();
			},
			to(url){
				this.setCookie('scrollTop',this.$refs.box.scrollTop)
				this.setCookie('tabActive',this.tabActive)
				this.setCookie('Category',this.Category)	
				this.$router.push(url)
				},
			to1(){
				this.setCookie('scrollTop',this.$refs.box.scrollTop)
				this.setCookie('tabActive',this.tabActive)
				this.setCookie('Category',this.Category)	
				}
		}
	};
</script>

<style>
.page_p{position: absolute;top:0px; width: 100%; bottom: 0px;overflow: auto}
.newsCell{}
.newsCell .pic{overflow: hidden;margin-right: 10px; float: left;position: relative}
.newsCell .pic img{width: 7rem;height:5rem;float: left;}
.newsCell h3{height: 3em;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin-bottom:0.5rem;    line-height: 1.5em;font-size: 1rem;color: #333;}
.newsCell p span{ color: #999;margin-right: 15px; font-size: 12px;}
.newsCell p span .van-icon{ font-size: 12px;margin-right: 5px;display: inline-block;}
.news_i{ display: inline-block;z-index:0;position: absolute;top:0px;left:0px;background: #f60; font-size: 12px; color: #fff;line-height: 20px;padding: 0 5px;}
</style>